<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>wjh-webpage</title>
		<style>
			body
			{
				margin: 0px;
				background-color: black;
			}
			#vision
			{
				height: 100vh;
				width: 100vw;
				font-size: 6vmin;
				background-color: slategrey;
				color: tomato;
				text-align: center;
			}
			#d0
			{
				height: 100vh;
				width: 100vw;
			}
			#d1
			{
				width: 100%;
				text-align: center;
			}
			@keyframes c1ani
			{
				0%{
					stroke-dashoffset: 130;
				}
				10%{
					stroke-dashoffset: 0;
				}
				20%{
					stroke: coral;
					stroke-width: 8;
					stroke-dasharray: 130;
				}
				30%{
					stroke-dasharray: 30;
				}
				40%{
					stroke: red;
					stroke-width: 4;
					stroke-dasharray: 80;
				}
				50%{
					stroke: orangered;
					stroke-width: 5;
					stroke-dasharray: 10;
				}
				60%{
					stroke: yellow;
					stroke-width: 2;
					stroke-dasharray: 60;
				}
				70%{
					stroke: green;
					stroke-width: 1;
					stroke-dasharray: 20;
				}
				80%{
					stroke: blue;
					stroke-width: 3;
					stroke-dasharray: 0;
				}
				90%{
					stroke: purple;
					stroke-dashoffset: 0;
					stroke-opacity: 1;
					stroke-width: 2;
					stroke-dasharray: 50;
				}
				100%{
					stroke-dasharray: 130;
					stroke-dashoffset: 130;
				}
			}
			#c1
			{
				stroke-dasharray: 130;
				stroke-dashoffset: 130;
				animation: c1ani 15s;
				animation-play-state: paused;
				animation-fill-mode: none;
			}
			@keyframes xg
			{
				0%{
					clip-path: ellipse(40vmin 40vmin at 0% 50%);
					-webkit-clip-path: ellipse(20vw 20vw at 0% 0%);
					color: aqua;
				}
				50%{
					clip-path: ellipse(40vmin 10vmin at 0% 50%);
					-webkit-clip-path: ellipse(20vw 20vw at 100% 0%);
					color: greenyellow;
				}
				100%{
					clip-path: ellipse(40vmin 10vmin at 0% 50%);
					-webkit-clip-path: ellipse(20vw 20vw at 0% 0%);
					color: aqua;
				}
			}
			#d2
			{
				margin: 0px;
				height: 100vh;
				width: 100vw;
				text-align: center;
				font-size: 10vw;
				animation: xg 7.5s;
				animation-play-state: paused;
				animation-iteration-count: 2;
				animation-fill-mode: none;
			}
			#debug
			{
				margin: 0;
				height: 100vh;
				width: 100vw;
				background-color: black;
				display: none;
			}
			#dbd1
			{
				position: relative;
				top: 30vh;
				width: 100%;
			}
			#dit
			{
				text-align: center;
				font-size: 10vw;
				color: black;
				text-shadow: 0 0 5px aqua;
				transition: 1s;
			}
			#dit:hover
			{
				color: aqua;
			}
			#ip1
			{
				margin: 10vmin;
				margin-left: 20vw;
				font-size: 0vw;
				height: 1vh;
				border-radius: 1vmin;
				width: 1vw;
				background-color:cadetblue;
				transition: 2s;
			}
			#ip1:hover
			{
				font-size: 6vw;
				height: 8vw;
				border-radius: 10vmin;
				width: 60vw;
				background-color:cornflowerblue;
			}
			#bt1
			{
				margin-left: 40vw;
				width: 1vw;
				height: 1vh;
				font-size: 0vw;
				background-color: crimson;
				border-radius: .2vh;
				transition: 2s;
			}
			#bt1:hover
			{
				width: 20vw;
				height: 8vw;
				font-size: 6vw;
				border-radius: 5vh;
			}
		</style>
		<script>
			tevent=0;
			function oc1()
			{
				document.getElementById("vision").style.display='none';
				document.getElementById("c1").style.animationPlayState='running';
				document.getElementById("d2").style.animationPlayState='running';
				tevent=setTimeout(function(){location.href='select.html';},15555);
			}
			function debugw()
			{
				clearTimeout(tevent);
				document.getElementById("c1").style.animationPlayState='pause';
				document.getElementById("d2").style.animationPlayState='pause';
				document.getElementById('d0').style.display='none';
				document.getElementById('vision').style.display='none';
				document.getElementById('debug').style.display='block';
			}
			function dbc()
			{
				ct=document.getElementById('ip1').value;
				if(ct==18)
				{
					location.href='test18files/test18.html';
				}
				else
				{
					location.href='test'+ct+'.html';
				}
			}
		</script>
	</head>
	<body>
		<div id="d0">
			<div id="vision" onclick="oc1()">最后更新日期2020.12.26<br>(浏览器缓存时长24h)<br>点击任意地方进入</div>
			<div id="d1">
				<svg id="svg1" height='500' width='500' viewBox='0 0 100 100'>
					<circle id='c1' cx="50" cy="50" r="20" stroke="aqua" stroke-width="2" stroke-linecap='round' fill="none" />
				</svg>
			</div>
			<div id="d2">???????????</div>
		</div>
		<div id="debug">
			<div id="dbd1">
				<div id="dit">code</div><br>
				<input type="text" id="ip1"><br>
				<button id="bt1" onclick="dbc()">enter</button>
			</div>
		</div>
	</body>
</html>